<template>
	<view>
		<view class="orderInfo">
			<view class="order">
				<view class="QRcode">
					<view>核销码：<text>{{orderInfo.id}}</text></view>
					<image src="/static/uni.png"></image>
				</view>
			</view>
		</view>
		<view class="orderInfo">
			<view class="order">
				<view class="title">
					<text>订单详情</text>
					<view class="status">{{orderTypeList[orderInfo.status]}}</view>
				</view>
				<view class="Info">
					<view>订单号：{{orderInfo.id}}</view>
					<view>服务项目：{{orderInfo.service}}</view>
					<view>服务门店：{{orderInfo.doorName}}
						<uni-icons @click="toInfo" color="#2979ff" :size="20" type="paperplane-filled"
							size="18"></uni-icons>
					</view>
					<view>下单时间：{{orderInfo.time}}</view>
					<view>预约时间：{{orderInfo.time}}</view>
					<view>车辆：奔驰FWE4/豫A98FHJ</view>
					<view>备注：奔驰FWE4/豫A98FHJ</view>
				</view>
			</view>
		</view>
		<view class="orderInfo">
			<view class="order">
				<view class="title">
					<text>订单详情</text>
				</view>
				<view class="priceInfo">
					<view>
						<view>车辆精洗</view>
						<view>￥11</view>
					</view>
					<view class="mod1">
						<view>车辆附加费用</view>
						<view>￥1</view>
					</view>
					<view>
						<view>原价</view>
						<view>￥11.98</view>
					</view>
					<view class="mod2">
						<view>店家优惠</view>
						<view class="color1">￥10.00</view>
					</view>
					<view class="mod3">
						<view>优惠券</view>
						<view class="color1">￥10</view>
					</view>
					<view>
						<view>支付金额</view>
						<view class="color2">￥22</view>
					</view>
				</view>
			</view>
		</view>

		<view class="foot">
			<view class="serve">
				<img src="../static/客服.png" alt="" />
				<view>联系客服</view>
			</view>
			<view class="buttonView">
				<view>取消订单</view>
				<view>立即支付</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				orderTypeList: ["全部", "待支付", "待使用", "待评价"],
				tabCurrent: 0,
				orderInfo: {}
			}
		},
		onLoad(option) {
			console.log("option:", option);
			this.getOrderInfo(option.id)
		},
		methods: {
			toInfo(id) {
				uni.navigateTo({
					url: "/packagesOrder/myOrder/myOrder?id=" + id
				})
			},
			tab(index) {
				this.tabCurrent = index
			},
			// 获取所有的订单
			getOrderInfo() {
				this.orderInfo = {
					"id": 1234567,
					"service": "车辆保养",
					"doorName": "沪爷冲击！",
					"time": "2025-01-05 10:29",
					"price": 135.34,
					"status": 1,
				}
			}
		}
	}
</script>
<style>
	page {
		padding-bottom: 200rpx;
	}

	/* 底部客服 */
	.foot {
		background-color: #fff;
		display: flex;
		position: fixed;
		bottom: 0;
		justify-content: space-between;
		font-size: 24rpx;
		padding: 20rpx;
		width: 710rpx;

		align-items: center;
	}

	.foot img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.foot>view:nth-child(1) {
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	.foot>view:nth-child(2) {
		display: flex;
		border-radius: 20rpx;
	}

	.buttonView { 
		display: flex;
		justify-content: space-between;
	}
	.buttonView>view{
		background-color: #3183FB;
		border-radius: 50rpx;
		padding: 15rpx 30rpx;
		color: #fff;
		margin-left: 20rpx;
	}
	/* 价格详情的价格颜色 */
	.priceInfo>view>view:nth-child(2) {
		text-align: center;
		width: 100rpx;
	}

	.color1 {
		color: #FF5929;
	}

	.color2 {
		color: #18bc37;
		font-size: 34rpx;
		font-weight: bold;
	}

	/* 价格详情的下划线 */
	.mod1 {
		border-bottom: #f7f7f7 1rpx solid;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;

	}

	.mod2 {
		border-bottom: #f7f7f7 1rpx solid;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;

	}

	.mod3 {
		border-bottom: #f7f7f7 8rpx solid;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 价格详情开始 */
	.priceInfo {
		line-height: 60rpx;
		padding-top: 20rpx;
		font-size: 26rpx;
		line-height: 65rpx;
	}

	.priceInfo>view {
		display: flex;
		justify-content: space-between;

	}

	/* 价格详情结束 */
	/* 二维码开始 */
	.QRcode {
		text-align: center;
		font-weight: bold;
	}

	.QRcode>view {
		text-align: center;
		margin: 10rpx auto 20rpx;
	}

	.QRcode>view>text {
		font-size: 30rpx;
	}

	.QRcode>image {
		width: 200rpx;
		height: 200rpx;
		margin: 0 auto;
	}

	/* 二维码结束 */



	/* 中部主要内容 */
	.Info {
		line-height: 60rpx;
		padding-top: 20rpx;
		font-size: 24rpx;
	}

	.status {
		color: #2979ff;
		font-weight: bold;
		font-size: 24rpx;
		padding-right: 50rpx;
	}

	.statusA {}

	.bodyView {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		border-bottom: #f7f7f7 8rpx solid;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	/* 订单编号 */

	.title {
		padding-top: 10rpx;
		padding-bottom: 20rpx;
		border-bottom: #f7f7f7 8rpx solid;
		display: flex;
		justify-content: space-between;
		font-weight: bold;
	}

	.title>.uni-icons {
		font-weight: 100;
	}

	.order {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.orderInfo {
		padding-top: 10rpx;
		margin: 0 auto;
		/* width: 720rpx; */
	}
</style>